<template>
  <div class="header-detail-wrap flex align-center space-center">
    <div class="header-detail-main">
      <div class="flex align-center">
        <NuxtLink to="/">
          <img src="@img/logo.png" class="head-wrap-logo" alt="website" />
        </NuxtLink>
        <div class="flex">
          <div class="flex fs-24 white align-center">
            <div
              v-for="(v, i) in configMenu"
              :key="v.key"
              :class="`cursor white fs-24 fw-800 ${i > 0 ? 'ml40' : 'ml48'}`"
              @click="goUrl(v.url)"
            >
              <el-tooltip
                v-if="v.sub_menu && v.sub_menu.length > 0"
                popper-class="pull-down"
                effect="light"
                placement="bottom"
              >
                {{ v.name }}
                <template #content>
                  <div class="pull-down-list">
                    <div
                      v-for="item in v.sub_menu"
                      :key="item.key"
                      class="pull-down-item"
                      @click="goUrl(item.url)"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                </template>
              </el-tooltip>
              <template v-else>
                {{ v.name }}
              </template>
            </div>
            <div class="ml40 flex align-center fw-800" style="border: none">
              <el-tooltip
                popper-class="pull-down"
                effect="light"
                placement="bottom"
              >
                <div class="flex align-center">
                  <img src="@img/cn-icon.png" class="cn-icon" alt="arrow" />
                  <div class="ml7 fs-24 white fw-800">
                    {{ state.language.toUpperCase() }}
                  </div>
                </div>
                <template #content>
                  <div class="pull-down-list" style="width: 100px">
                    <div
                      v-for="item in langList"
                      :key="item"
                      class="pull-down-item"
                      @click="updateLang(item)"
                    >
                      {{ item }}
                    </div>
                  </div>
                </template>
              </el-tooltip>
              <!-- <el-dropdown>
                <div class="flex align-center">
                  <img src="@img/cn-icon.png" class="cn-icon" alt="arrow" />
                  <div class="ml10 fs-24 white fw-800">
                    {{ state.language }}
                  </div>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="updateLang('en')"
                      >EN</el-dropdown-item
                    >
                    <el-dropdown-item @click="updateLang('es')"
                      >ES</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const { configMenu } = useData()
const { state, updateLang, langList } = usePageData()

const goUrl = (url) => {
  if (!url) return
  window.location.href = url
}
</script>
<style lang="scss" scoped>
.white {
  color: #fff;
}
.ml40 {
  margin-left: 40px !important;
}

.ml48 {
  margin-left: 48px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.header-detail-wrap {
  background: #171a26;
  width: 100%;
  margin: 0 auto;

  .header-detail-main {
    width: 1200px;
    margin: 0 auto;
    height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .head-wrap-logo {
    width: 280px;
    height: 68px;
  }
}
.pull-down-list {
  width: 300px;
  .pull-down-item {
    font-weight: bold;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
  }
}
.ml7 {
  margin-left: 7px;
}
</style>
